<template>
  <div>
    <div class="search">
      <van-icon name="arrow-left" @click="$router.back()" color="#fff" />
      <!-- 搜索组件 -->
      <SearchCom />
    </div>
    <!-- 地区分类 -->
    <Condition :selArea="selArea" @selHouseFn="selHouseFn" @getList="getList" />
    <div>
      <!-- 房子列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        v-if="housList.length"
      >
        <HouseCard :housList="housList"></HouseCard>
      </van-list>
      <div class="empty" v-else>
        <img src="http://liufusong.top:8080/img/not-found.png" />
        <p>暂无房源</p>
      </div>
    </div>
  </div>
</template>

<script>
import SearchCom from '../../components/Search/SearchCom.vue'
import { allHousesApi } from '@/api'
// import { Axios } from '../../utiles/request'
import Condition from './condition.vue'
import HouseCard from './houseCard.vue'
export default {
  data () {
    return {
      housList: [],
      activeNames: 0,
      selArea: [],
      loading: false,
      finished: false,
      stat: 1,
      end: 20
    }
  },
  async created () {
    const res = await this.allHousesFn()
    this.housList = res.data.body.list
  },
  components: { SearchCom, Condition, HouseCard },
  methods: {
    async selHouseFn (name) {
      // console.log(name)
      // const res = allHousesApi({ params: name })
      // this.housList = res.data.body.list
      // this.imgSrc = Axios.defaults.baseURL
    },
    async allHousesFn () {
      if (localStorage.getItem('sel_city')) {
        return await allHousesApi({
          cityId: JSON.parse(localStorage.getItem('sel_city')).value,
          stat: this.stat,
          end: this.end
        })
        // this.housList = res.data.body.list
      } else {
        return await allHousesApi({
          cityId: JSON.parse(localStorage.getItem('hkzf_city')).value,
          stat: this.stat,
          end: this.end
        })
        // this.housList = res.data.body.list
      }
    },
    async onLoad () {
      this.stat += 20
      this.end += 20
      const res = await this.allHousesFn()
      const newHouseList = res.data.body.list
      if (newHouseList.length < 20) {
        this.finished = true
      }
      this.housList = [...this.housList, ...newHouseList]
      this.finished = false
      this.loading = false
    },
    getList (val) {
      this.housList = val
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  background-color: #2eb97c;
  display: flex;
  align-items: center;
  padding-left: 15px;
}
.van-panel {
  margin: 0 15px;
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 150px;
    margin: 30px 0;
  }
  p {
    font-size: 14px;
  }
}
</style>
